
<template>
  <div class="tipTopBox" v-if="showTip">
    <div class="tipTopContent">
      <i style="color: #5473E8" class="el-icon-info leftIcon"></i>
      <p style="margin-left: 10px">{{value|introduce}}</p>
      <el-button class="rightIcon" type="text" icon="el-icon-close" @click="updatefunctionIntroduce"></el-button>
    </div>
  </div>
</template>

<script>
import {getfunctionIntroduce, updatefunctionIntroduce} from '@/api/system/user'
export default {
  name:'IntroduceTip',
  props:['value'],
  filters:{
    // 功能介绍
    introduce(value){
      return {
        1: '订单、车辆借调、车辆管理、其他成本产生的实际收入及支出流水整合',//财务流水
        2: '订单租金、续租、车损费及违章费用的收支情况；财务人员可进行收款、确认收款及确认退款操作；也可在订单模块进行收款，由财务人员进行收款确认，是否需财务确认可前往商户中心-配置中心进行配置',//订单运营账单
        3: '订单违章押金、车辆押金的收支情况。财务人员可进行收款、确认收款及确认退款操作；也可在订单模块进行收款',//订单押金账单
        4: '与同行借调车辆产生的借调费用的收支情况。在借调模块操作借调后，费用将同步到此模块',//借调对账单
        5: '车辆处置、维修、保养、保险、年检、违章、分期付款产生的收支情况。在车辆模块进行相应操作后，费用将同步到此模块',//车辆管理账单
        6: '统计每辆车当日出租状态，若车辆出租则展示当日出租的日租金。此模块与财务未强关联，仅代表车辆出租商家可获租金',//每日概况-单车
        7: '统计各个车型当日出租车辆数及出租率，若车辆出租则展示当日出租的日租金。此模块与财务未强关联，仅代表车辆出租商家可获租金',//每日概况-车型
        8: '统计单车某段时间内出租情况、出租率及日租金总和。此模块与财务未强关联，仅代表车辆出租商家可获租金',//累计概况-单车
        9: '统计各个车型下车辆出租情况、出租率及日租金总和。此模块与财务未强关联，仅代表车辆出租商家可获租金',//累计概况-车型
        10:'' +
          '结合财务模块收支数据，统计车辆所有收支账单数据',//财务营收统计
        11:'默认统计某段时间还车的日租订单财务收支情况，商家可根据需求调整筛选项查看数据',//订单营收统计
        12:'统计OTA订单列表中各个平台订单情况，通过设置分佣比例，查看分佣后各个平台营收情况', //OTA订单统计
      }[Number(value)];
    }
  },
  data(){
    return{
      showTip:true,
    }
  },
  mounted() {
    // this.getfunctionIntroduce();
  },
  methods:{
    getfunctionIntroduce(){
      getfunctionIntroduce(this.value).then(res=>{
        this.showTip = res.data == 0?true:false
      })
    },
    updatefunctionIntroduce(){
      this.showTip=false;
      // updatefunctionIntroduce(this.value).then(res=>{
      //   this.getfunctionIntroduce();
      // })
    }
  }
}

</script>

<style lang="scss" scoped>
.tipTopBox{
  display: flex;
  margin: 20px 0;
  .tipTopContent{
    position: relative;
    padding: 0 44px 0 20px;
    display: flex;
    align-items: center;
    background-color: #E6ECFF;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #BAC9FF;
    font-size: 14px;
    color: #333333;
    line-height:20px;
    .leftIcon{
      color: #5473E8;
      position: absolute;
      left: 10px;
      top: 16px;
      width: 14px;
      height: 14px;
    }
    .rightIcon{
      color: #333333;
      position: absolute;
      right: 0px;
      top: 8px;
    }
  }
}
</style>
